import React from 'react';
import base64url from "base64url";
import { connect } from 'dva'
import { routerRedux } from 'dva/router';
import { Icon, List, WhiteSpace, Grid, Button} from 'antd-mobile';
import { createForm } from 'rc-form';
import styles from './selfInfo.less';
import banner1 from '../../Study/img/study1.png';
import banner2 from '../../Study/img/study2.png';
import banner3 from '../../Study/img/study3.png';
import banner4 from '../../Study/img/study4.png';


const Item = List.Item;
const Brief = Item.Brief;
const empty = require('is-empty');
class Mine extends React.Component{

  constructor(props){
    super(props);
    this.state={
      rank:false,
    }
  }
  lookDetail =()=>{
    console.log('取消收藏 ')
  };

  render(){
    const data = [1,2,3,4];
    return(
      <div>
        {/*<NavBarItem title="收藏"/>*/}

        <Grid
          data={data}
          columnNum={2}
          hasLine={false}
          onClick={this.onClick}
          renderItem={dataItem => {
            let src ;
            switch (dataItem %4)
            {
              case 0:
                src = banner1;
                break;
              case 1:
                src = banner2;
                break;
              case 2:
                src = banner3;
                break;
              case 3:
                src = banner4;
                break;
            }
            return(
              <div style={{textAlign:'center',padding:'0.2rem'}}>
                <div style={{ width: '100%'}} >
                  <img src={src} style={{ width: '100%'}} />
                </div>
                <div style={{ textAlign:'left',marginTop:'0.1rem',fontSize: '0.31rem'}}>10问教你读懂两学一做</div>
              </div>
            )}}/>
        {/*<Flex  justify='between' align='top' style={{borderTop: '0.01rem solid #ddd',boxSizing: 'border-box',width: '100%',padding: '0.3rem 0.3rem',background: '#fff'}}>*/}
          {/*<div style={{width: '30%'}}>*/}
            {/*<img*/}
              {/*src={new1}*/}
              {/*alt=""*/}
              {/*style={{width: '100%',height: '1.5rem',verticalAlign: 'top'}} />*/}
          {/*</div>*/}
          {/*<div style={{width: '65%',height: '1.5rem',position: 'relative'}}>*/}
            {/*<div style={{width: '100%',height:'0.9rem',lineHeight:'0.45rem',fontSize: '0.36rem',letterSpacing: '0.02rem',overflow: 'hidden'}}>*/}
              {/*庆祝中国人民解放军建军90周年大会在京隆重举行*/}
            {/*</div>*/}
            {/*<Flex justify='start' align='center' style={{width: '100%',position: 'absolute',bottom: '0',fontSize: '0.3rem',textAlign:'right'}}>*/}
              {/*<div onClick={this.lookDetail} style={{border:'1px solid red',color:'red',padding:'5px',marginLeft:'60%'}}>取消收藏</div>*/}
            {/*</Flex>*/}
          {/*</div>*/}
        {/*</Flex>*/}
        {/*<Flex  justify='between' align='top' style={{borderTop: '0.01rem solid #ddd',boxSizing: 'border-box',width: '100%',padding: '0.3rem 0.3rem',background: '#fff'}}>*/}
          {/*<div style={{width: '30%'}}>*/}
            {/*<img*/}
              {/*src={new1}*/}
              {/*alt=""*/}
              {/*style={{width: '100%',height: '1.5rem',verticalAlign: 'top'}} />*/}
          {/*</div>*/}
          {/*<div style={{width: '65%',height: '1.5rem',position: 'relative'}}>*/}
            {/*<div style={{width: '100%',height:'0.9rem',lineHeight:'0.45rem',fontSize: '0.36rem',letterSpacing: '0.02rem',overflow: 'hidden'}}>*/}
              {/*庆祝中国人民解放军建军90周年大会在京隆重举行*/}
            {/*</div>*/}
            {/*<Flex justify='start' align='center' style={{width: '100%',position: 'absolute',bottom: '0',fontSize: '0.3rem',textAlign:'right'}}>*/}
              {/*<div onClick={this.lookDetail} style={{border:'1px solid red',color:'red',padding:'5px',marginLeft:'60%'}}>取消收藏</div>*/}
            {/*</Flex>*/}
          {/*</div>*/}
        {/*</Flex>*/}
        {/*<Flex  justify='between' align='top' style={{borderTop: '0.01rem solid #ddd',boxSizing: 'border-box',width: '100%',padding: '0.3rem 0.3rem',background: '#fff'}}>*/}
          {/*<div style={{width: '30%'}}>*/}
            {/*<img*/}
              {/*src={new1}*/}
              {/*alt=""*/}
              {/*style={{width: '100%',height: '1.5rem',verticalAlign: 'top'}} />*/}
          {/*</div>*/}
          {/*<div style={{width: '65%',height: '1.5rem',position: 'relative'}}>*/}
            {/*<div style={{width: '100%',height:'0.9rem',lineHeight:'0.45rem',fontSize: '0.36rem',letterSpacing: '0.02rem',overflow: 'hidden'}}>*/}
              {/*庆祝中国人民解放军建军90周年大会在京隆重举行*/}
            {/*</div>*/}
            {/*<Flex justify='start' align='center' style={{width: '100%',position: 'absolute',bottom: '0',fontSize: '0.3rem',textAlign:'right'}}>*/}
              {/*<div onClick={this.lookDetail} style={{border:'1px solid red',color:'red',padding:'5px',marginLeft:'60%'}}>取消收藏</div>*/}
            {/*</Flex>*/}
          {/*</div>*/}
        {/*</Flex>*/}

      </div>
    )
  }
}
const Form = createForm()(Mine);
function mapStateToProps({manualMember}) {
  return {manualMember}
}
export default connect(mapStateToProps)(Form);
